@import "fontsize-and-color.scss";

.list-type2 {
  width: 1226px;
  min-width: 1226px;
  margin-top: 24px;

  .list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;

    .list-title {
      @include font-very-big;
      color: #333;
      cursor: pointer;
      display: flex;
      align-items: center;

      .iconfont {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        line-height: 26px;
        color: #333;
      }
    }

    .more {
      display: flex;
      align-items: center;
      @include font-big;
      color: $main-text-2nd;

      label {
        display: block;
        cursor: pointer;
        margin-left: 30px;

        // has伪类监听兄弟元素的checked事件
        // 注意此段代码在firefox上无效
        &:first-child:has(~.radio1:checked),
        &:nth-child(3):has(~.radio2:checked) {
          color: $mi-theme-color;
          border-bottom: 2px solid $mi-theme-color;
        }
      }

      input {
        display: none;
      }

    }
  }

  .list-body {
    height: 614px;
    width: 100%;

    .body-content {
      height: 100%;
      width: 100%;
      position: relative;


      ul {
        display: none;
        grid: repeat(2, 300px) / repeat(5, 234px);
        gap: 14px;
        position: absolute;
        left: 0;
        top: 0;

        li {
          position: relative;

          &:first-child {
            grid-row: span 2;
          }

          &:last-child {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }

        }

      }

    }
  }

  &:has(.radio1:checked) .list-body>.body-content>.first-ul {
    display: grid;
  }

  &:has(.radio2:checked) .list-body>.body-content>.second-ul {
    display: grid;
  }

}